<template>
  <div class="login-form">
    <div class="login_logo">
      <!-- <img style="height: 96px" :src="userStore.loginlogoimg()" /> -->
    </div>
    <div class="login_content">
      <div class="title">欢迎登录</div>
      <div class="forms">
        <div class="user_name">
          <el-input v-model="formData.user_name" style="width: 300px; height: 40px">
            <template #prefix>
              <img style="width: 20px; height: 20px" src="@/assets/login/icon-user.png" alt="" />
            </template>
          </el-input>
        </div>
        <div class="pass_word">
          <el-input
            ref="password"
            v-model="formData.pass_word"
            :type="inputtype"
            style="width: 300px; height: 40px"
            @focus="isfocus = true"
            @blur="isfocus = false"
          >
            <template #prefix>
              <img style="width: 20px; height: 20px" src="@/assets/login/icon-password.png" alt="" />
            </template>
            <template #suffix>
              <div style="cursor: pointer" @click="changeinputtype()" v-if="!isfocus">
                <img
                  v-if="inputtype == 'password'"
                  style="width: 16px; height: 16px"
                  src="@/assets/login/icon-eye-close.png"
                  alt=""
                />
                <img
                  v-if="inputtype == 'text'"
                  style="width: 16px; height: 16px"
                  src="@/assets/login/icon-eye.png"
                  alt=""
                />
              </div>
              <div style="cursor: pointer" @click="changeinputtype()" v-if="isfocus">
                <img
                  v-if="inputtype == 'password'"
                  style="width: 16px; height: 16px"
                  src="@/assets/login/icon-eye-close-active.png"
                  alt=""
                />
                <img
                  v-if="inputtype == 'text'"
                  style="width: 16px; height: 16px"
                  src="@/assets/login/icon-eye-active.png"
                  alt=""
                />
              </div>
            </template>
          </el-input>
        </div>
        <div class="remember">
          <el-checkbox v-model="rememberchecked" label="记住密码" />
        </div>
        <div class="login_button">
          <el-button class="button" @click="handleLogin">登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ElMessage } from 'element-plus'
import { useRequest } from '@/hooks/request'
import http from '@/utils/uc-http'
import { ref, nextTick } from 'vue'

const showPassword = ref(false)
const rememberchecked = ref(false)
const password = ref(null)
const isfocus = ref(false)

const inputtype = ref('password')
const formData = reactive({
  plant_code: 'yanghao-plant',
  mac: '',
  user_name: '',
  pass_word: '',
})
const userStore = useUserStore()

const { loading, request } = useRequest(async () => {
  let mac = await window.electron.getMacAddress()
  formData.mac = mac
  formData.plant_code = userStore.packageJs.plantcode
  
  return http.post('/login', formData).then(res => {
    if (res != undefined) {
      userStore.loginSuccess(res)
    }
  })
}, false)

const handleLogin = () => {
  if (!formData.user_name || formData.user_name == '') return ElMessage.warning('请输入用户名')
  if (!formData.pass_word || formData.pass_word == '') return ElMessage.warning('请输入密码')

  if (rememberchecked.value) {
    localStorage.setItem(`${userStore.packageJs.plantcode}_username`, formData.user_name)
    localStorage.setItem(`${userStore.packageJs.plantcode}_password`, formData.pass_word)
  } else {
    localStorage.removeItem(`${userStore.packageJs.plantcode}_username`)
    localStorage.removeItem(`${userStore.packageJs.plantcode}_password`)
  }

  request()
}

const changeinputtype = () => {
  if (inputtype.value == 'password') {
    inputtype.value = 'text'
  } else {
    inputtype.value = 'password'
  }

  setTimeout(() => {
    password.value.ref.selectionStart = password.value.ref.value.length
    password.value.ref.selectionEnd = password.value.ref.value.length
  }, 100)
}

onMounted(() => {
  const savedUsername = localStorage.getItem(`${userStore.packageJs.plantcode}_username`)
  const savedPassword = localStorage.getItem(`${userStore.packageJs.plantcode}_password`)

  if (savedUsername && savedPassword) {
    formData.user_name = savedUsername
    formData.pass_word = savedPassword
    rememberchecked.value = true
  }
})
</script>

<style lang="scss" scoped>
.login-form {
  width: 428px;
  height: 412px;
  border-radius: 4px;
  border: 1px solid #e2e2e2;
  box-shadow: 0 4px 16px #8697b133;
  background-color: #fff;
  display: flex;
  flex-direction: column;

  align-items: center;
  position: relative;
}

.login_logo {
  position: absolute;
  top: -48px;
}

.login_content {
  width: 100%;
  // flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #000;
  // margin-top: 60px;
  height: 140px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  // background-image: linear-gradient(to bottom, #c4fbff, #fff);
  // background: url('@/assets/login/bg2.png');
  background-size: cover;
}
.forms {
  display: flex;
  flex-direction: column;
}

.user_name {
  // margin-top: 40px;
}
.pass_word,
.remember,
.login_button {
  margin-top: 24px;
}

.remember {
  font-size: 14px;
  color: #000;
}

.button {
  background-color: var(--pcmain-color);
  border-color: var(--pcmain-color);
  color: #fff;
  width: 300px;
  height: 40px;
}
</style>

